<template>
  <el-row :gutter="10">
    <el-col :span="10">
      ID:
      <el-input
        v-model="code.id"
        v-bind="idProps"
      ></el-input>
  
      template：
      <el-input
        v-model="code.template"
        v-bind="tempProps"
      ></el-input>
  
      setup：
      <el-input
        v-model="code.js"
        v-bind="jsProps"
      ></el-input>
    </el-col>
    <el-col :span="14">
      <el-button type="" @click="start">运行</el-button>
      <run-code
        :reload="reload"
        :code="code"
      >
      </run-code>
    </el-col>
  </el-row>
</template>

<script>
  import { watch, ref } from 'vue'
  import { ElInput, ElButton, ElRow, ElCol } from 'element-plus'
  import runCode from './run-cdn.vue'
  import { store } from '@naturefw/nf-state'

  const jsProps = {
    // autosize: true,
    rows: 10,
    type: "textarea",
    placeholder: "const foo = ref('测试') \nreturn {\n foo \n}"
  }
  
  const tempProps = {
    // autosize: true,
    rows: 10,
    type: "textarea",
    placeholder: "可以写 template "
  }

  
  const idProps = {
    // autosize: true,
    type: "text",
    placeholder: "编写代码标识，用于转移位置"
  }


</script>

<script setup>

  const props = defineProps({
    code: Object // 运行代码的对象
  })

  const reload = ref(false)
  const start = () => {
    reload.value = !reload.value
  }
 

  watch(() => props.code.id, (id) => {
    reload.value = !reload.value
  }, {immediate: true})

</script>